/**
 * Created by 1 on 2016/11/22.
 */
var $ = function (element) {
    return document.querySelector(element);
}
/**
 * 监听事件函数
 * @param ele
 * @param type
 * @param handler
 */
function eventHandler(ele,type,handler) {
    if (ele.addEventListener){
        ele.addEventListener(type,handler,false);
    }else if (ele.attachEvent){
        ele.attachEvent("on" + type,handler);
    }else {
        ele["on" + type] = handler;
    }
}
function preHandler() {
    var root = $(".root");//获得根元素
    reset();
    preOrder(root);
    changeColor();
}
function middleHandler() {
    var root = $(".root");//获得根元素
    reset();
    middleOrder(root);
    changeColor();
}
function lastHandler() {
    var root = $(".root");//获得根元素
    reset();
    lastOrder(root);
    changeColor();

}
/**
 * 前序遍历，根左右
 */
function preOrder(node) {
    if (!(node == null)) {
        numList.push(node);
        preOrder(node.firstElementChild);
        preOrder(node.lastElementChild);
    }
}

/**
 * 中序遍历，左根右
 */
function middleOrder(node) {
    if(node != null){
        middleOrder(node.firstElementChild);
        numList.push(node);
        middleOrder(node.lastElementChild);
    }
}
/**
 * 后序遍历，左右根
 */
function lastOrder(node) {
    if (node != null){
        lastOrder(node.firstElementChild);
        lastOrder(node.lastElementChild);
        numList.push(node);
    }
}
function changeColor() {//先将其功能按顺序放入数组内，然后再使用延时函数显示数组即可，不需要变实现功能变现实
    var i = 0;
    numList[i].style.backgroundColor = 'blue';
    var timer = setInterval(function () {//函数每隔500秒被调用一次
        i++;
        if (i < numList.length){
            numList[i - 1].style.backgroundColor = '#fff';
            numList[i].style.backgroundColor = 'blue';
        }else {
            clearInterval(timer);//清除定时器
            numList[numList.length - 1].style.backgroundColor = '#fff';//将最后一个的颜色变为白色
        }
    },500)
}
//重置样式
function reset() {
    numList = [];//重置数组中的数据
    var divs = document.getElementsByTagName("div");
    for (var i = 0;i < divs.length;i++){
        divs[i].style.backgroundColor = '#fff';
    }
}
//初始化函数
function init() {
    eventHandler($("#pre"),'click',preHandler);
    eventHandler($("#middle"),'click',middleHandler);
    eventHandler($("#last"),'click',lastHandler);

}

init();